<template>
    <div class="sui-overlay" v-if="visible" @click.prevent="close">
       <slot></slot>
    </div>
</template>

<script>
  export default {
    props:{
      visible:{
        default:false
      }
    },
    model: {
      prop: 'visible',
    },
    methods:{
      close(){
        this.visible=false
        this.$emit('close')
      }
    }
  }

</script>

<style type="text/css" lang="less" scoped>
.sui-overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
}
</style>
